import React, { useState, useCallback, useMemo } from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Alert,
  Table,
  message,
  Tooltip,
} from 'antd';
import { useRequest } from 'ahooks';

import QueryFormWrapper from '@/components/queryFormWrapper/';

import * as Api from './api';
import S from './index.less';

const formInitialValues = {
  id: '',
  status: '',
};

function Page() {
  const [userBalance, setUserBalance] = React.useState(0);
  const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
  const [listParams, setListParams] = useState({
    pageNum: 1,
    numPerPage: 10,
    ...formInitialValues,
  });

  // 获取列表数据
  const listRequest = useRequest(() => Api.getList(listParams), {
    refreshDeps: [listParams],
    formatResult(result) {
      if (result.code === 0 && result.data) {
        return result.data;
      } else if (result.code !== 0) {
        message.error(`请求失败：${result.msg}`);
      }
      return {};
    },
  });

  const columns = useMemo(
    () => [
      {
        title: 'ID',
        dataIndex: 'id',
        width: 80,
        render: text => <a>{text}</a>,
      },
      {
        title: '描述',
        dataIndex: 'content',
        render(content) {
          return (
            <Tooltip title={content}>
              <div className={S.textOmitted}>{content}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '时间',
        dataIndex: 'date',
        width: 120,
        render: data => {
          return <span>{data || '-'}</span>;
        },
      },

      {
        title: '状态',
        dataIndex: 'status',
        width: 100,
      },
      {
        title: '操作',
        key: 'action',
        width: 100,
        render: () => (
          <Button type="link" onClick={() => {}}>
            确定
          </Button>
        ),
      },
    ],
    [],
  );
  const rowSelection = {
    selectedRowKeys,
    onChange: selected => setSelectedRowKeys(selected),
    hideDefaultSelections: true,
    getCheckboxProps: record => ({
      ...record,
      disabled: true,
    }),
  };
  // 查询按钮
  const onFinish = useCallback(values => {
    setListParams(t => ({ ...t, ...values }));
  }, []);

  return (
    <div className={S.page}>
      {/* 对查询栏的封装，传入Form.Item即可，组件内部处理布局 */}
      <QueryFormWrapper
        onFinish={onFinish}
        initialValues={formInitialValues}
        submitLoading={listRequest.loading}
      >
        <Form.Item name="id" label="ID" rules={[]}>
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item name="status" label="状态" rules={[]}>
          <Select>
            <Select.Option value="">全部</Select.Option>
            <Select.Option value="1">成功</Select.Option>
            <Select.Option value="2">失败</Select.Option>
          </Select>
        </Form.Item>
      </QueryFormWrapper>

      <div className={S.table}>
        <Alert
          style={{ margin: '16px 0' }}
          message={'提示信息'}
          type="info"
          showIcon
        />

        <Table
          rowKey="id"
          rowSelection={rowSelection}
          columns={columns}
          dataSource={[
            {
              id: 1,
              content:
                '1dsdsajkdhsajfhlasjfhl阿苏勒电话放辣椒开始撒拉多加湖发几十块的话费了卡号是阿斯顿返回拉萨金黄色',
              date: '2020-10-10',
              status: 'success',
            },
            {
              id: 2,
              content:
                '1dsdsajkdhsajfhlasjfhl阿苏勒电话放辣椒开始撒拉多加湖发几十块的话费了卡号是阿斯顿返回拉萨金黄色',
              date: '2020-10-10',
              status: 'success',
            },
            {
              id: 3,
              content:
                '1dsdsajkdhsajfhlasjfhl阿苏勒电话放辣椒开始撒拉多加湖发几十块的话费了卡号是阿斯顿返回拉萨金黄色',
              date: '2020-10-10',
              status: 'success',
            },
          ]}
          loading={listRequest.loading}
          pagination={{
            showQuickJumper: true,
            showSizeChanger: false,
            current: listRequest.data ? listRequest.data.currentPage : 0,
            total: listRequest.data ? listRequest.data.totalCount : 0,
            showTotal: totals => `共 ${totals} 条`,
            onChange: pageNum => setListParams(t => ({ ...t, pageNum })),
          }}
        />
      </div>
    </div>
  );
}
Page.title = 'table';
export default Page;
